<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
    <style>
        html, body {
            position: relative;
            overflow-x: hidden;
        }

        #fileBtn {
            width: 1.86rem;
            height: 2.24rem;
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            opacity: 0;
        }

        .fileBtn {
            width: 1.86rem;
            height: 2.24rem;
            border: 0.02rem dashed #1e81d2;
            text-align: center;
            position: relative;
            left: 0;
            top: 0;
        }

        .fileBtn p {
            line-height: 2.24rem;
        }

        #img {
            width: 1.86rem;
            height: 2.24rem;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            display: none;
        }

        .img {
            width: 1.86rem;
            height: 2.24rem;
        }

        .img-box {
            margin-top: 0.8rem;
        }
    </style>
</head>
<body style="background-color: #f4f9fd;">

<!--header begin-->
<header class="header-border-bt">
    <div id="flexHeader">
        <div class="div1"><a href="index.html"><img src="images/icon_arrow_left.png"></a></div>
        <div class="div2">身份证信息</div>
        <div class="div3"></div>
    </div>
</header>
<!--header end-->

<!--Commission begin-->
<article>
    <div class="wang-tab">
        <div class="content-incomplete-tasks">
            <div class="wang-tab-content wang-tab-content-1 transition" style="margin-top: 0.18rem;">
                <div class="IDCardInfo">
                    <div>
                        <!--<form action="" method="post">-->
                        <section>
                            <label>姓名</label>
                            <input type="search" placeholder="请您输入您的真实姓名">
                        </section>
                        <section>
                            <label>身份证</label>
                            <input type="search" placeholder="请输入您的身份证">
                        </section>
                        <section>
                            <main>
                                <label>上传手持身份证照片<br>手持身份证实拍照片<br>(完整上半身照)</label>
                            </main>
                            <main>
                                <aside class="fileBtn">
                                    <p>&nbsp;</p>
                                    <input id="fileBtn" type="file" onchange="upload();" accept="image/*"
                                           capture="camera" multiple="multiple"/>
                                    <!--单张图片容器-->
                                    <img src="" id="img"/>
                                </aside>
                            </main>
                        </section>
                        <aside>
                            <main>
                                <p>根据国家网信办新规，平台进行实名安全工作，当您的账号出
                                    现风险时，在必要是系统会要求您进行更高级别的认证。我们
                                    承诺保障您的账户资金安全，且不会泄露您的个人隐私，请您
                                    积极配合。</p>

                                <p><a href="#">进去查看身份证要求</a></p>
                            </main>
                        </aside>

                        <a href="#"><input type="submit" id="summitBut" value="保存" class="user-login-btn-selected"></a>

                        <!--</form>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

<!--Commission end-->


<!--js-->
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    // 实例化一个空对象
    var data = new FormData();
    //获取file文件
    var file = document.getElementById(yourInputId).files[0];
    //将文件加入到data中，一般FormData对象中添加数据使用append()方法
    data.append(file)
    // 创建一个HTTP请求
    var request = new XMLHttpRequest();
    // 然后使用open方法，选择传送的method和后台的URL
    request.open("POST|GET", "URL");
    // 最后，向后台发送我们的数据
    request.send(data);

    // 获取要传输的文件------假设只有一个文件
    var file = document.getElementById(yourInputId).files[0];
    // ajax传输
    $.ajax({
        url: URL,
        type: "POST",
        async: false,
        cache: false,
        processData: false,// 告诉jQuery不要去处理发送的数据
        contentType: false,// 告诉jQuery不要去设置Content-Type请求头
        data: file,
        success: function (data) {
            alert(data);
        },
        error: function (err) {
            alert(err);
        }
    });

</script>
<script type="text/javascript">
    //单张图片上传
    function upload() {
        var $c = document.querySelector("#fileBtn");//上传出发按钮
        var $d = document.querySelector("#img");//图片容器
        var file = $c.files[0];//获取file对象单张
        var reader = new FileReader();//创建filereader对象
        reader.readAsDataURL(file);//转换数据
        reader.onload = function (e) {//加载ok时触发的事件
            console.log(file);
            $d.setAttribute("src", e.target.result);//给图片地址,显示缩略图
            $d.style.display = "block";//样式显示
        };
    };

</script>

</body>
</html>